<template>
    数据统计<br /><br />
    <el-row>
        <el-col :span="10">
            <el-row>
                <el-col :span="7">
                    <RouterLink to="/employee/myacceptedworkorder">
                        <el-button type="primary" @click="" style="margin-right: 20px;">我的工单</el-button>
                    </RouterLink>
                </el-col>
                <el-col :span="3" v-for="item in workOrderStat" :key="item.title">
                    <el-statistic :title="item.title" :value="item.num"></el-statistic>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="10">
            <el-row>
                <el-col :span="6">
                    <RouterLink to="/employee/mypatroltask">
                        <el-button type="primary" @click="" style="margin-right: 20px;">我的巡查</el-button>
                    </RouterLink>
                </el-col>
                <el-col :span="4" v-for="item in patrolTaskStat" :key="item.title">
                    <el-statistic :title="item.title" :value="item.num"></el-statistic>
                </el-col>
            </el-row>
        </el-col>
    </el-row>


    <hr /><br />
    接单大厅
    <el-button type="primary" size="small" @click="getUnreceivedWorkorder" plain>刷新</el-button>
    <br /><br />
    <el-table :data="unreceivedWorkorderData" style="width: 100%" max-height="650">
        <el-table-column prop="reportAddress" label="报事地址" width="200px" />
        <el-table-column prop="orderTime" label="报事时间" width="200px" sortable/>
        <el-table-column prop="submitterName" label="报事人" width="100px" />
        <el-table-column prop="categoryName" label="工单分类" width="100px">
            <template #default="{ row }">
                <el-tag type="" size="small">{{ row.categoryName }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="orderRemark" label="报事备注" width="500px" />

        <el-table-column fixed="right" label="&nbsp; 操作" width="120">
            <template #='rs'>
                <!-- 确认框 -->
                <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消"
                    @confirm="acceptWorkorder(rs.row.id)" icon-color="#A3C478" title="确认接收这个工单？">
                    <template #reference>
                        <el-button type="primary" size="small">接单</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
import { useUserInfoStore } from '@/stores/userInfo.js';
const userInfoStore = useUserInfoStore();
const userInfo = userInfoStore.userInfo;

import { employeeGetUnreceivedWorkorderService, employeeAcceptWorkorderService, employeeGetCountService } from "@/api/user";

const unreceivedWorkorderData = ref([]);
let workOrderStat = ref([{ title: '', num: 0 }])
let patrolTaskStat = ref([{ title: '', num: 0 }])

async function getUnreceivedWorkorder() {
    try {
        let result = await employeeGetUnreceivedWorkorderService(userInfo.id);
        if (result.code == 200) {
            unreceivedWorkorderData.value = result.data;
            ElMessage.success(result.msg)
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            unreceivedWorkorderData.value = [];
            ElMessage.warning(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (getUnreceivedWorkorder)')
    }
}

async function acceptWorkorder(workOrderId) {
    try {
        let result = await employeeAcceptWorkorderService(userInfo.id, workOrderId);
        if (result.code == 200) {
            ElMessage.success(result.msg)
            getUnreceivedWorkorder();
            getCount();
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (acceptWorkorder)')
    }
}

async function getCount() {
    try {
        let result = await employeeGetCountService(userInfo.id);
        if (result.code == 200) {
            workOrderStat.value = result.data['workOrderStat'];
            patrolTaskStat.value = result.data['patrolTaskStat']
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            workOrderStat.value = [];
            patrolTaskStat.value = [];
            ElMessage.warning(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (employeeGetCount)')
    }
}

getUnreceivedWorkorder();
getCount();

</script>

<style></style>